<script setup lang="ts">
  import { VideoState } from '@renderer/enums/settingEnum'
  import { VideoType } from '@renderer/types/store'
  import useVideo from '@renderer/hooks/useVideo'

  defineProps<{ file: VideoType }>()

  const { formatFileSize, removeFile } = useVideo()
</script>

<template>
  <div
    class="file-item relative flex items-center justify-between gap-4 overflow-hidden border-b border-gray-200 p-3 last:border-b-0"
    :style="{ '--progress': `${file.progress | 0}%` }"
  >
    <!-- 进度条背景 -->
    <div class="absolute inset-0 bg-blue-500/10" :style="{ width: 'var(--progress)' }"></div>

    <!-- 缩略图 -->
    <div
      class="thumbnail-container z-10 h-11 w-20 flex flex-shrink-0 items-center justify-center overflow-hidden rounded bg-gray-100"
    >
      <img
        v-if="file.thumbnail"
        :src="file.thumbnail"
        alt="视频预览"
        class="h-full w-full object-cover"
      />
      <div v-else class="thumbnail-placeholder flex items-center justify-center">
        <div class="i-carbon-document-video text-4xl text-gray-400"></div>
      </div>
    </div>

    <!-- 文件信息 -->
    <div class="z-10 flex flex-1 flex-col gap-1 overflow-hidden">
      <span class="file-name truncate text-sm text-gray-800">{{ file.name }}</span>
      <div class="flex items-center gap-2">
        <div class="flex items-center gap-1">
          <Icon name="i-material-symbols-summarize" class="text-xs text-gray-400"></Icon>
          <span class="file-size text-xs text-gray-500">{{ formatFileSize(file.size) }}</span>
        </div>
        <div v-if="file.resolution && file.resolution.width > 0" class="flex items-center gap-1">
          <Icon name="i-material-symbols-aspect-ratio" class="text-xs text-gray-400"></Icon>
          <span class="text-xs text-gray-500">
            {{ file.resolution.width }}x{{ file.resolution.height }}
          </span>
        </div>
      </div>
    </div>

    <!-- 删除按钮或完成图标 -->
    <div class="options flex flex-row gap-4">
      <button v-if="file.state === VideoState.SUCCESS" class="completed-icon z-10">
        <div class="i-carbon-checkmark text-green-500"></div>
      </button>
      <button
        v-if="file.state !== VideoState.SUCCESS"
        class="delete-btn z-10 flex cursor-pointer items-center justify-center border-none bg-none p-1 hover:opacity-80"
        @click="removeFile(file)"
      >
        <div class="i-carbon-trash-can text-red-500"></div>
      </button>
    </div>
  </div>
</template>
